<template>
  <div id="home" :style="`max-height:${$store.state.screenHeight - 71}px`">
    <!-- 富文本编辑器组件 -->
    <!-- options配置富文本编辑器 -->
    <!-- focus编辑器获取焦点事件回调 -->
    <!-- blur编辑器失去焦点事件回调 -->
    <!-- change编辑器内容改变事件回调 -->
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @focus="onEditorFocus($event)"
      @blur="onEditorBlur($event)"
      @change="onEditorChange($event)"
      class="editor"
    ></quill-editor>
    <!-- 文件上传的表单 -->
    <form
      action
      method="post"
      enctype="multipart/form-data"
      id="uploadFormMulti"
    >
      <!-- 上传图片 -->
      <input
        style="display: none"
        type="file"
        name="file"
        multiple
        accept="image/jpg, image/jpeg, image/png, image/gif"
        @change="uploadImg()"
        ref="upImg"
      />
      <!-- 上传视频 -->
      <input
        style="display: none"
        ref="upVideo"
        type="file"
        name="file"
        multiple
        accept="video/*"
        @change="uploadVideo()"
      />
    </form>
    <!-- 插入图片对话框 -->
    <div class="insertImg" v-if="showInsertImg">
      <!-- 头部 -->
      <div class="insertImgHeader">
        <!-- 关闭按钮 -->
        <i class="iconfont icon-guanbi" @click="hideInsertImg"></i>
      </div>
      <!-- 插入网络图片 -->
      <div class="insertImgMain">
        <span>URL:</span>
        <input
          type="text"
          placeholder="网络图片地址"
          v-model="imgUrl"
          @keydown.enter="NetImg(imgUrl)"
        />
        <button @click="NetImg(imgUrl)">确定</button>
      </div>
      <!-- 上传本地图片 -->
      <button class="upLoadImgBtn" @click="upLoadImgClick">上传图片</button>
    </div>

    <!-- 插入视频对话框 -->
    <div class="insertImg" v-if="showInsertVideo">
      <!-- 头部 -->
      <div class="insertImgHeader">
        <!-- 关闭按钮 -->
        <i class="iconfont icon-guanbi" @click="hideInsertVideo"></i>
      </div>
      <!-- 插入网络视频 -->
      <div class="insertImgMain">
        <span>URL:</span>
        <input
          type="text"
          placeholder="网络视频嵌入代码"
          v-model="videoUrl"
          @keydown.enter="NetVideo(videoUrl)"
        />
        <button @click="NetVideo(videoUrl)">确定</button>
      </div>
      <!-- 上传本地视频 -->
      <button class="upLoadImgBtn" @click="upLoadVideoClick">上传视频</button>
    </div>
  </div>
</template>

<script>
// 引入编辑器模块
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

// 引入图片缩放和拖拽模块
import Quill from "quill";
// const Clipboard = Quill.import("modules/clipboard");
// import Delta from "quill-delta";
import ImageResize from "quill-image-resize-module"; // 引用
import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize); // 注册

// 工具栏配置
const toolbarOptions = [
  [{ header: [1, 2, 3, 4, 5, 6, false] }, { size: [] }], // 标题
  // [{ size: [] }], // 字体大小
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ align: [] }, "bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  [{ font: [] }], // 字体种类
  ["blockquote", "code-block"], // 引用  代码块
  // [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  [{ script: "sub" }, { script: "super" }], // 上标/下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  // [{ direction: "rtl" }], // 文本方向
  // [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link", "image", "video"], //图片和视频
];

export default {
  name: "Home",
  // 注册组件
  components: {
    quillEditor,
  },
  data() {
    return {
      // 是否显示插入图片
      showInsertImg: false,
      // 图片链接
      imgUrl: "",
      // 是否显示插入视频
      showInsertVideo: false,
      // 视频链接
      videoUrl: "",
      // 富文本编辑器默认内容
      content: "",
      // 配置
      editorOption: {
        // 编辑器主题
        theme: "snow",
        // 当编辑器为空时显示的占位符文字
        placeholder: "请输入正文",
        // 需要引入模块的对象，引入图片拖拽和缩放模块
        modules: {
          // 图片拖拽，false是拖拽不生成新图
          imageDrop: false,
          // 图片缩放
          imageResize: {
            // 样式
            displayStyles: {
              // 左下角尺寸的背景颜色
              backgroundColor: "#B49FCC",
              // 边框
              border: "none",
              // 字体颜色
              color: "white",
            },
            // 引入的模块Resize为尺寸，DisplaySize为显示尺寸，Toolbar为工具栏
            modules: ["Resize", "DisplaySize", "Toolbar"],
            // modules: ["Resize", "DisplaySize"],
          },
          //  富文本编辑器配置
          toolbar: {
            container: toolbarOptions,
          },
        },
      },
      // 窗口高度
      screenHeight: "",
      // 编辑器光标位置
      selection: null,
      // 创建formData对象
      formData: new FormData(),
      // 文件列表
      files: [],
      // 可支持上传的文件类型
      SupportType: "image,video",
      // 是否上传，如果没有可上传文件则不上传
      isUpLoad: false,
    };
  },
  // 计算属性
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    // 点击插入图片时弹出上传图片框事件
    var imgHandler = async (image) => {
      if (image) {
        // 保存光标位置
        this.selection = this.editor.getSelection();
        // 显示插入图片
        this.showInsertImg = true;
        // 隐藏插入图片对话框
        this.showInsertVideo = false;
      }
    };
    // 将imgHandler事件挂载到工具栏的图片按钮
    this.editor.getModule("toolbar").addHandler("image", imgHandler);
    // 点击插入视频时弹出上传图片框
    var videoHandler = async (video) => {
      if (video) {
        // 保存光标位置
        this.selection = this.editor.getSelection();
        // 显示插入视频
        this.showInsertVideo = true;
        // 隐藏插入图片对话框
        this.showInsertImg = false;
      }
    };
    // 将videoHandler事件挂载到工具栏的图片按钮
    this.editor.getModule("toolbar").addHandler("video", videoHandler);
    // console.log(this.editor);
    // this.editor.clipboard.addMatcher(Node.TEXT_NODE, function (node, delta) {
    //   console.log("node");
    //   console.log(node);
    //   console.log("delta");
    //   // delta.ops[0].insert=
    //   console.log(delta.ops[0]);
    //   return new Delta().insert(node.data);
    // });
    // 工具栏提示文字
    // document.querySelector(".ql-header").title = "标题";
    document.querySelector(".ql-size").title = "字号";
    document.querySelector(".ql-color").title = "字体颜色";
    document.querySelector(".ql-background").title = "文字底色";
    document.querySelector(".ql-align").title = "对齐";
    document.querySelector(".ql-bold").title = "粗体";
    document.querySelector(".ql-italic").title = "斜体";
    document.querySelector(".ql-underline").title = "下划线";
    document.querySelector(".ql-strike").title = "删除线";
    document.querySelector(".ql-blockquote").title = "引用";
    document.querySelector(".ql-code-block").title = "代码块";
    document.querySelectorAll(".ql-list")[0].title = "有序列表";
    document.querySelectorAll(".ql-list")[1].title = "无序列表";
    document.querySelectorAll(".ql-script")[0].title = "下标";
    document.querySelectorAll(".ql-script")[1].title = "上标";
    document.querySelectorAll(".ql-indent")[0].title = "左缩进";
    document.querySelectorAll(".ql-indent")[1].title = "右缩进";
    document.querySelector(".ql-clean").title = "清除格式";
    document.querySelector(".ql-link").title = "链接";
    document.querySelector(".ql-image").title = "图片";
    document.querySelector(".ql-video").title = "视频";

    // 设置监听窗口大小事件，当窗口大小改变时回调handleResize方法
    window.addEventListener("resize", this.handleResize);
    // 初始化高度
    this.handleResize();
    //更新笔记信息
    this.$bus.$on("resetNoteInfo",noteInfo=>{
      console.log("更新笔记信息");
      console.log(noteInfo);
      this.content = noteInfo.data;
    })
  },
  beforeDestroy(){
    this.$bus.$off("resetNoteInfo");
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {
      // this.editor.clipboard.dangerouslyPasteHTML(
      //   5,
      //   "<p>Hello&nbsp;<strong>World</strong>!</p>",
      //   "https://www.jb51.net/article/87056.htm?tdsourcetag=s_pctim_aiomsg"
      // );
    },
    // 富文本编辑器 内容改变事件
    onEditorChange() {
      // 如果未保存
      if (!this.$store.state.save) {
        console.log("asdfs");
        this.$store.commit("setSave", true);
        // 向服务器发送保存请求
        setTimeout(() => {
          console.log("正在保存");
          this.saveNoteData()
          console.log(this.content);
        }, 1000);
        // 5秒后设置为未保存
        setTimeout(() => {
          this.$store.commit("setSave", false);
          // 向服务器发送保存请求
          setTimeout(() => {
            console.log("正在保存");
            this.saveNoteData();
            console.log(this.content);
          }, 1000);
        }, 5000);
      }
    },
    // 上传视频点击确认时调用
    async uploadVideo() {
      console.log("上传视频");
      try {
        //axios调用上传文件接口

        //返回上传文件的地址
        let url =
          "http://120.25.126.174/shipin.mp4";
        // 如果url不为空
        if (url != null && url.length > 0) {
          // 获取当前光标位置
          let Range = this.editor.getSelection();
          //上传文件成功之后在富文本中回显(显示)
          this.editor.insertEmbed(
            Range != null ? Range.index : 0,
            "video",
            url
          );
        } else {
          console.log("视频上传失败");
        }
      } catch ({ message: msg }) {}
    },
    // 上传图片点击确认时调用
    uploadImg() {
      // // var _this = this;
      // //构造formData对象
      // var formData = new FormData();
      // // 将要上传的图片添加到formData
      // formData.append("file", document.getElementById("upImg").files[0]);
      // try {
      //   //axios调用上传文件接口

      //   //返回上传文件的地址
      //   let url =
      //     "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F14%2F20200414164613_nmoji.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644733886&t=a65efcc48fd25840d17a8e6d047a100a";
      //   // 如果url不为空
      //   if (url != null && url.length > 0) {
      //     // 获取当前光标位置
      //     let Range = this.editor.getSelection();
      //     //上传文件成功之后在富文本中回显(显示)
      //     this.editor.insertEmbed(
      //       Range != null ? Range.index : 0,
      //       "image",
      //       url
      //     );
      //   } else {
      //     console.log("图片上传失败");
      //   }
      // } catch ({ message: msg }) {}
      // //将文件的文本框的value置空
      // document.getElementById("upImg").value = "";
      // this.showInsertImg = false;
      // 将获取到的文件赋值给this.files
      this.files = this.$refs.upImg.files; // console.log(this.files);
      // 创建FileReader用于读取文件
      // const reader = new FileReader();
      //获得图片地址  放在reader.result内
      // reader.readAsDataURL(this.$refs.file.files[0]); // 当reader获取完成时调用
      // reader.onload = () => {
      //   // 将获取到的图片数据赋值给imgSrc
      //   this.imgSrc = reader.result;
      // };
      // 文件类型
      // let fileType;
      // 文件大小
      // let fileSize;
      // 遍历this.files数组
      for (let item of this.files) {
        // 获取文件类型
        // fileType = item.type.split("/")[0];
        // 如果支持上传该文件类型
        // if (this.SupportType.indexOf(fileType) != -1) {
        // 获取文件大小，单位mb
        // fileSize = item.size / (1024 * 1024);
        // if (fileSize < 100) {
        // 将文件添加到formData
        this.formData.append("file", item);
        // 有可上传文件
        // this.isUpLoad = true;
        // } else {
        // this.$toast("上传的图片或视频应小于100M");
        // }
        // } else {
        // this.$toast("仅支持上传图片或视频");
        // }
      }
      // 如果有可上传文件，发送ajax请求
      // if (this.isUpLoad) {
      // this.isLoading = true;
      // 设置其他参数
      // this.formData.append("advContent", "");
      // 设置axios的参数
      var options = {
        // 请求api
        url: "", // 请求体
        data: this.formData, // 请求方式
        method: "post", // 请求头
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }; // 发送ajax请求
      try {
        this.$http(options)
          .then((res) => {
            // 成功时回调
            console.log(res);
            // this.isLoading = false;
            // this.$toast("已成功添加");
            //   //返回上传文件的地址
            let url =
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F14%2F20200414164613_nmoji.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644733886&t=a65efcc48fd25840d17a8e6d047a100a";
            // 如果url不为空
            if (url != null && url.length > 0) {
              // 获取当前光标位置
              let Range = this.editor.getSelection();
              //上传文件成功之后在富文本中回显(显示)
              this.editor.insertEmbed(
                Range != null ? Range.index : 0,
                "image",
                url
              );
            } else {
              console.log("图片上传失败");
            }
          })
          .catch((req) => {
            // 失败时回调
            // this.isLoading = false;
            // this.$toast("添加失败");
            console.log(req);
          });
      } catch (e) {
        console.log(e);
      }
      // 重置isUpLoad
      // this.isUpLoad = false;
      // }
    },
    // 窗口大小改变时调用
    handleResize() {
      //   this.screenHeight = document.body.clientHeight; //获取窗口高度
      // 通过vuex修改窗口高度
      this.$store.commit("setScreenHeight", document.body.clientHeight);
      // 工具栏高度
      let toolbarHeight =
        document.querySelector(".ql-toolbar").clientHeight + 3;
      // console.log(toolbarHeight);
      // 获取编辑器主内容元素
      let ql_container = document.querySelector(".ql-container");
      // 设置编辑器主内容的高度
      console.log(this.$store.state.screenHeight);
      ql_container.style.height = `${
        this.$store.state.screenHeight - 70 - toolbarHeight
      }px`;
      //   ql_container.style.height = `${
      //     this.$store.state.screenHeight - (70+toolbarHeight)
      //   }px`;
    },
    // 隐藏插入图片
    hideInsertImg() {
      this.showInsertImg = false;
    },
    // 隐藏插入视频
    hideInsertVideo() {
      this.showInsertVideo = false;
    },
    // 上传图片
    upLoadImgClick() {
      // document.getElementById("upImg").click(); //点击上传图片的输入框
      this.$refs.upImg.click();
    },
    // 上传视频
    upLoadVideoClick() {
      // document.getElementById("upVideo").click(); //点击上传视频的输入框
      this.$refs.upVideo.click();
    },
    // 插入网络图片
    NetImg(imgUrl) {
      // 获取网络图片url
      let url = imgUrl;
      // 如果url不为空
      if (url != null && url.length > 0) {
        // 获取光标位置
        let Range = this.selection;
        //上传文件成功之后在富文本中回显(显示)
        this.editor.insertEmbed(Range != null ? Range.index : 0, "image", url);
        // 隐藏插入图片
        this.showInsertImg = false;
        // 清空图片链接
        this.imgUrl = "";
      }
    },
    // 插入网络视频
    NetVideo(videoUrl) {
      let url;
      // 获取视频url
      try {
        // 获取从//到" 的字符串再按"分组,获得第一组
        url = videoUrl.match(/(?<=\/\/).*(?="\s)/)[0].split('"')[0];
      } catch (e) {
        try {
          // 获取从//到' 的字符串再按'分组,获得第一组
          url = videoUrl.match(/(?<=\/\/).*(?='\s)/)[0].split("'")[0];
        } catch (e) {
          // 获取//后的字符串
          url = videoUrl.split("//")[1];
        }
      }
      url = "https://" + url;
      // 如果url不为空
      if (url != null && url.length > 0) {
        // 获取光标位置
        let Range = this.selection;
        //上传文件成功之后在富文本中回显(显示)
        this.editor.insertEmbed(Range != null ? Range.index : 0, "video", url);
        // 隐藏插入视频
        this.showInsertVideo = false;
        // 清空视频链接
        this.videoUrl = "";
      }
    },
    // 保存笔记数据
    async saveNoteData(){
      console.log("保存笔记数据");
      let noteId = this.$route.params.id;
      const {data:res} = await this.$http.updateNote({noteid:noteId,data:this.content});
      console.log(res);
    }
    // ctrlv() {
    //   console.log("粘贴");
    // },
  },
};
</script>

<style lang="less" scoped>
#home {
  width: 100%;
  height: 100%;
  // background-image: url("../images/bg.jpg");
  // background-size: cover;
  // background-repeat: no-repeat;
  // background-position: center;
  .insertImg {
    width: 380px;
    // height: 300px;
    background-color: rgb(234, 246, 255);
    // background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    // border: rgb(47, 47, 47) 1px solid;
    // z-index: 101;
    .insertImgHeader {
      border-radius: 10px 10px 0 0;
      width: 100%;
      height: 30px;
      background-color: rgb(106, 168, 212);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        margin-right: 10px;
        color: white;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .insertImgMain {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
      span {
        // color: white;
        font-size: 16px;
        margin-right: 10px;
      }
      input {
        // border: none;
        outline: none;
        // background-color: rgb(106, 168, 212);
        border: 1px solid rgb(106, 168, 212) s;
        border-radius: 5px;
        width: 60%;
        height: 30px;
        padding: 0 20px;
        border: 1px solid transparent;
        // 鼠标移入输入框包裹器时
        &:hover {
          // 边框
          border: 1px solid #0182c7;
        }
      }
      button {
        width: 60px;
        height: 30px;
        background-color: rgb(106, 168, 212);
        margin-left: 10px;
        border-radius: 5px;
        font-size: 14px;
        color: white;
        cursor: pointer;
        &:hover {
          background-color: rgba(106, 168, 212, 0.8);
        }
      }
    }
    .upLoadImgBtn {
      display: block;
      width: 90px;
      height: 30px;
      background-color: rgb(106, 168, 212);
      margin: 0 auto;
      border-radius: 999px;
      text-align: center;
      line-height: 30px;
      color: white;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover {
        background-color: rgba(106, 168, 212, 0.8);
      }
    }
  }
  // .overLay{
  //   width: 100%;
  //   height: 100%;
  //   background-color: rgba(0, 0, 0, .5);
  //   z-index: 100;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  // }
}
// 插入的视频样式
/deep/ .ql-editor .ql-video {
  // 宽高
  width: 487px;
  height: 361px;
  // 最大宽度
  max-width: 100%;
}
// 输入框内容
/deep/ .ql-editor {
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}
// 输入框
/deep/ .ql-container.ql-snow {
  // 清除输入框边框
  border: none;
}
// 工具栏
/deep/ .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid #ccc;
}
// /deep/ .ql-snow .ql-editor img{
//   width: 50%;
// }
// 编辑器
.editor {
  // 行高
  line-height: normal !important;
  // 高度
  height: 100%;
  // 宽度
  // width: 1024px;
  width: 100%;
  // 水平居中
  // margin: 0 auto;
  // 背景颜色
  background-color: white;
}
/deep/ .ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

/deep/ .ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

// /deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
// .ql-snow .ql-picker.ql-header .ql-picker-item::before {
//   content: "文本";
// }
/deep/ [data-v-fae5bece] .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-v-fae5bece]::before {
  content: "正文";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "正文";
}
// .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
// .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
//   content: "标题1";
// }
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
/deep/
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="monospace"]::before,
/deep/
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
/deep/ .ql-snow .ql-tooltip::before {
  content: "打开链接";
}
/deep/ .ql-snow .ql-tooltip a.ql-action::after {
  content: "编辑";
}
/deep/ .ql-snow .ql-tooltip a.ql-remove::before {
  content: "移除";
}
@media (max-width: 1024px) {
  .editor {
    width: 100%;
  }
}
</style>